<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">

        .content{

            /*width: 500px;*/
            height: 200px;
            background-color: #bbbbbb;
        }
        .one1,.one2, .one3{

            width: 200px;
            height: 100px;

        }
        .one1{
            background-color: #f00;
            float: left;
        }
        .one2{
            background-color: #0f0;
            float: right;
        }
        .one3{
            background-color: #00f;
            float: left;
        }

        .base{
            width: 900px;
            height: 900px;
            margin: 0px auto;
            background-color: #cccccc;
            margin-top: 20px;
        }
        .base_top, .base_bottom{
            height: 200px;
            background-color: aquamarine;
        }
        .base_center{
            /*height: 600px;*/
            background-color: cornsilk;
        }
        .base_center .base_center_left,.base_center .base_center_right{
            width: 450px;
            height: 600px;
            float: left;
        }
        .base_center_left{
            background-color: beige;
        }
        .base_center_right{
            background-color: aqua;
        }

        /*清除浮动*/
        .clearfix:after{
            content: "020";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix{
            /* 触发 hasLayout */
            zoom: 1;
        }

    </style>
</head>
<body>
<div class="content">
    <div class="one1"></div>
    <div class="one2"></div>
    <div class="one3"></div>
</div>
<div class="base">
    <div class="base_top"></div>
    <div class="base_center clearfix">
        <div class="base_center_left"></div>
        <div class="base_center_right"></div>
    </div>
    <div class="base_bottom"></div>
</div>
</body>
</html>